Vue.component('swiper-text', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'paddingLeft':Left,'paddingRight':Right,'marginTop':Top,'marginBottom':Bottom,width}" >
    <el-carousel style="overflow:hidden;" :style="{'borderRadius':Radius}" :interval="interval" :type="data.type" 
        :height="height" :arrow="data.arrow" :direction="data.direction" :trigger="data.trigger">
        <el-carousel-item  v-for="(item,index) in swiper" :key="index">
            <el-image style="width: 100%;height: 100%;" :src="BASE_IMG+item[data.label]" :fit="item.fit"></el-image>
        </el-carousel-item>
    </el-carousel>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
    computed: {
        interval() {
            return this.data.times * 1000
        }
    },
    data() {
        return {
            swiper: [],
        }
    },
    watch:{
        'data.label':function(newVal){
           this.getData();
        }
    },
    methods: {
        getData() {
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}${this.data.action}`,
                type: 'POST',
                data: {
                    Data: this.data.params
                },
                success: function (res) {
                    that.swiper = res;
                },
                error: function () {
                    // that.$message.error("提交失败，请稍后再试")
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                }
            })
        }
    },
    mounted() {
        this.getData();
    }
})
Vue.component('swiper', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'paddingLeft':Left,'paddingRight':Right,'marginTop':Top,'marginBottom':Bottom,width}" >
    <el-carousel style="overflow:hidden;" :style="{'borderRadius':Radius}" :interval="interval" :type="data.type" 
        :height="height" :arrow="data.arrow" :direction="data.direction" :trigger="data.trigger">
        <el-carousel-item  v-for="(item,index) in swiper" :key="index">
            <el-image style="width: 100%;height: 100%;" :src="BASE_IMG+item[data.label]" :fit="item.fit"></el-image>
        </el-carousel-item>
    </el-carousel>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
    computed: {
        interval() {
            return this.data.times * 1000
        }
    },
    data() {
        return {
            swiper: [],
        }
    },
    watch:{
        'data.label':function(newVal){
           this.getData();
        }
    },
    methods: {
        getData() {
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}${this.data.action}`,
                type: 'POST',
                data: {
                    Data: this.data.params
                },
                success: function (res) {
                    that.swiper = res;
                },
                error: function () {
                    // that.$message.error("提交失败，请稍后再试")
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                }
            })
        }
    },
    mounted() {
        this.getData();
    }
})
// 轮播图配置
Vue.component('swiper-config', {
    template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">轮播图组件</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="切换箭头显示">
            <el-select filterable v-model="data.arrow" placeholder="请选择">
                <el-option v-for="(item,index) in arrow" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="轮播间隔（秒）">
            <el-input-number v-model="data.times" :min="1" placeholder="请输入轮播秒数"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="组件类型">
            <el-radio v-model="data.type" label="">正常</el-radio>
            <el-radio v-model="data.type" label="card">卡片化</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="方向">
            <el-radio v-model="data.direction" label="horizontal">水平</el-radio>
            <el-radio v-model="data.direction" label="vertical">垂直</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="指示器触发">
            <el-radio v-model="data.trigger" label="click">点击指示器</el-radio>
            <el-radio v-model="data.trigger" label="hover">鼠标移入</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="圆角弧度">
            <el-input-number v-model="data.radius" :min="0" placeholder="请输入圆角弧度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="组件宽度">
            <el-input-number v-model="data.width" :min="1" placeholder="请输入组件宽度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="宽度单位">
            <el-select filterable v-model="data.widthUnit" placeholder="请选择宽度单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="组件高度">
            <el-input-number v-model="data.height" :min="1" placeholder="请输入组件高度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="高度单位">
            <el-select filterable v-model="data.heightUnit" placeholder="请选择高度单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0" placeholder="请输入左边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距单位">
            <el-select filterable v-model="data.leftUnit" placeholder="请选择左边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0" placeholder="请输入右边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距单位">
            <el-select filterable v-model="data.rightUnit" placeholder="请选择右边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0" placeholder="请输入上边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距单位">
            <el-select filterable v-model="data.topUnit" placeholder="请选择上边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0" placeholder="请输入下边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距单位">
            <el-select filterable v-model="data.bottomUnit" placeholder="请选择下边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">轮播图配置</div>
        <div class="operation">
            <el-button @click="change" type="primary" size="small">获取参数</el-button>
        </div>
    </div>
    <el-descriptions :column="1" border size="small">
        <el-descriptions-item label="选择接口">
            <el-select filterable v-model="data.action" style="width:100%" placeholder="请选择接口">
                <el-option v-for="(item,index) in arrow" :key="item.value" :label="item.System_Action_Name":value="item.System_Action_SerialNumber"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="参数配置">
            <el-input type="textarea" :autosize="{ minRows: 2}" placeholder="请输入内容" v-model="data.params"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="对应参数" v-if="arr.length>0">
            <el-select filterable v-model="data.label" style="width:100%" placeholder="请选择参数">
                <el-option v-for="(item,index) in arr" :key="item" :label="item":value="item"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
</el-card>`,
    mixins: [globalConfig, drag],//继承的方法
    data() {
        return {
            arrow: [],
            arr: [],
        }
    },
    methods: {
        getData() {
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                type: 'POST',
                data: {
                    Data: 'base_system_action_info'
                },
                success: function (res) {
                    that.arrow = res
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            })
        },
        change(e) {
            console.log(e);
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}${this.data.action}`,
                type: 'POST',
                data: {
                    Data: this.data.params
                },
                success: function (res) {
                    console.log(res);
                    if (res.length > 0) {
                        let arr = [];
                        for (let key in res[0]) {
                            arr.push(key);
                        }
                        that.arr = arr;
                    }
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            })
        }
    },
    mounted() {
        this.getData();
    }
})